import { observer } from 'mobx-react'
import './postManagementDetails.less'
import { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { getManagementOperationsDetails } from '@/apis/logManagement/managementOperations'
import { Button, Card, Form, Input, message, Space, Switch, Tag } from 'antd'
import { getPostManagementDetails } from '@/apis/postManagement/postManagement'

const StaffManagement: React.FC = () => {
  // 获取路由中的动态参数 :id
  const { id } = useParams<{ id: string }>() // 使用 TypeScript 时，指定参数类型
  const [messageApi, contextHolder] = message.useMessage()
  const navigate = useNavigate()
  const [data, setData] = useState<any>({})

  const [form] = Form.useForm()
  const getData = async () => {
    messageApi.open({
      type: 'loading',
      content: '加载中',
      duration: 0
    })
    try {
      const response = await getPostManagementDetails({ id })
      if (response.code === 200) {
        // 为每条数据添加唯一的 key
        setData(response.data)
        form.setFieldsValue(response.data)
      } else {
        message.error(response.message || '获取数据失败')
      }
    } catch (error) {
      message.error('获取数据失败')
    } finally {
      messageApi.destroy()
    }
  }

  useEffect(() => {
    // 假设你使用 `id` 去请求数据
    // 这里可以通过 id 获取数据
    // fetchData(id);
    id && getData()
  }, [id])
  const cardStyle = {
    body: {
      padding: '20px'
    }
  }

  const omBack = () => {
    navigate('/enterpriseManagement/postManagement')
  }

  return (
    <>
      <Card style={{ marginTop: 15, ...cardStyle }}>
        <div className="card-title">
          <span>基本信息</span>
        </div>

        <div style={{ maxWidth: '600px' }}>
          <Form
            form={form}
            style={{ flex: 1 }}
            labelCol={{ span: 4 }}
            onFinish={() => {
              message.success('保存成功')
              omBack()
            }}
          >
            <Form.Item
              label="岗位名称"
              name="jobName"
              rules={[{ required: true, message: '请输入岗位名称!' }]}
            >
              <Input value={data.jobName} placeholder="请输入岗位名称" />
            </Form.Item>
            <Form.Item
              label="岗位编码"
              name="jobCode"
              rules={[{ required: true, message: '请输入岗位名称!' }]}
            >
              <Input value={data.jobCode} placeholder="请输入岗位编码" />
            </Form.Item>

            <Form.Item label="状态" name="status">
              <Switch value={data.status === 1}></Switch>
            </Form.Item>

            <Form.Item label="岗位描述" name="jobDescription">
              <Input.TextArea value={data.jobDescription} rows={5} placeholder="请输入岗位描述" />
            </Form.Item>
          </Form>
        </div>
      </Card>
      <div
        style={{ height: '49px', width: '100%', marginTop: '20px', background: 'transparent' }}
      ></div>
      <div className="bottom">
        <Space>
          <Button
            onClick={() => {
              form.submit()
            }}
            type="primary"
            htmlType="submit"
          >
            保存
          </Button>
          <Button onClick={omBack}>返回</Button>
        </Space>
      </div>
    </>
  )
}

export default observer(StaffManagement)
